import React, { FC, useState } from 'react'
import { ReactSortable } from 'react-sortablejs'

export default function Tab({ onSelectKey }: { onSelectKey: (key: string) => void }) {
  const [state, setState] = useState([
    { id: 'a', type: 'input', position: { x: 0, y: 0 }, data: { label: 'wire' } },
    {
      id: 'b',
      type: 'position-logger',
      position: { x: -100, y: 100 },
      data: { label: 'drag me!' }
    },
    { id: 'c', position: { x: 100, y: 100 }, data: { label: 'your ideas' } },
    {
      id: 'd',
      type: 'output',
      position: { x: 100, y: 200 },
      data: { label: 'with React Flow' }
    },
    {
      id: 'e',
      type: 'output',
      position: { x: 300, y: 200 },
      data: { label: 'with React Flow' }
    },
    {
      id: 'f',
      type: 'output',
      position: { x: 400, y: 200 },
      data: { label: 'with React Flow' }
    }
  ])

  const drag = (e) => {
    console.log(e.target.dataset)
    onSelectKey(e.target.dataset.key)
  }
  return (
    <div style={{ display: 'flex', flexDirection: 'column', width: '400px' }}>
      {/* <TabItem></TabItem> */}
      {/* <ReactSortable
        sort={false}
        group={{ name: 'people', pull: true, put: false }}
        draggable=".tab"
        dragClass="tab"
        onClone={(e) => console.log(e)}
        list={state}
        setList={setState}
      > */}
      {state.map((item, index) => (
        <div draggable="true" data-key={item.id} onDragStart={(e) => drag(e)} className={`tab`} key={index}>
          {item.id}
        </div>
      ))}
      {/* </ReactSortable> */}
    </div>
  )
}
